import Taro from "@tarojs/taro";
import { Swiper, SwiperItem, View, Image, Video } from "@tarojs/components";
import { VideoCoverContainer } from '@/components/videoAndCover'
import { useState } from "react";
import { testImageUrl } from "@/utils/test";
import { AtCurtain } from "taro-ui";
import './index.scss';
export interface ISwiperContainerProps {
  auto: boolean;
  options: {
    route?: string;
    url: string;
    coverImg?: string;
    /**
     * 0 视频 1 图片
     */
    type: number;
  }[];
}

export const SwiperContainer = (props: ISwiperContainerProps) => {
  const { options } = props;

  const [showProjectVideo, setShowProjectVideo] = useState(false)

  const [playVideoSrc, setPlayVideoSrc] = useState('')

  const SwiperItems =
    options &&
    options.map(item => {
      return (
        <SwiperItem>
          <View className="swiper-item">
            {item.type === 1 ? (
              <Image
                src={item.url}
                mode="widthFix"
                style={{ width: "100%", borderRadius: '0.5rem' }}
              />
            ) :
              (
                <VideoCoverContainer
                  customStyle={{ width: "100%" }}
                  vClassName='v-top'
                  src={item.url}
                  auto={props.auto}
                  // disabledPlay={true}
                  // play={() => {
                  //   setPlayVideoSrc(item.url)
                  //   setShowProjectVideo(true)
                  // }}
                  videoCover={item.coverImg ? item.coverImg : ''} />
              )
            }
          </View>
        </SwiperItem>
      );
    });

  return (
    <View style={{ width: '100%' }}>
      <Swiper
        style={{
          minHeight: "38vh"
        }}
        className="swiper"
        indicatorColor="#999"
        indicatorActiveColor="#333"
        circular
        indicatorDots={false}
        autoplay
      >
        {SwiperItems}
      </Swiper>
      {
        showProjectVideo && playVideoSrc !== '' ?

          <AtCurtain
            isOpened={showProjectVideo && playVideoSrc !== ''}
            onClose={() => {
              setShowProjectVideo(false)
              setPlayVideoSrc('')
            }}
            closeBtnPosition="bottom"
          >
            <View>
              <Video
                style={{ width: "100%" }}
                id={`myVideo_${playVideoSrc}`}
                controls={true}
                showFullscreenBtn={true}
                autoplay={true}
                showPlayBtn={true}
                src={playVideoSrc}
              />

            </View>
          </AtCurtain> : ''
      }


    </View>
  );
};
